<template>
  <div class="chat-content">
    <!-- recordContent 聊天记录数组-->
    <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
      <div v-for="(itemc,indexc) in recordContent" :key="indexc">
        <!-- 对方 -->
        <div class="word" v-if="!itemc.mineMsg">
          <img :src="itemc.headUrl">
          <div class="info">
            <p class="time">{{ itemc.nickName }} {{ chatTime(itemc.timestamp) }}</p>
            <div class="info-content">
              {{ itemc.contactText }}
            </div>
          </div>
        </div>
        <!-- 我的 -->
        <div class="word-my" v-else>
          <div class="info">
            <p class="time">{{ itemc.nickName }} {{ chatTime(itemc.timestamp) }}</p>
            <div class="info-content">{{ itemc.contactText }}</div>
          </div>
          <img :src="itemc.headUrl">
        </div>
      </div>
    </ul>

    <el-input
      class="my-input"
      placeholder="请输入内容"
      v-model="word"
      @keyup.enter.native="addUserWord"
      clearable>
    </el-input>

    <div class="ask-btn">
      <el-button :size="'mini'" class="ask-btn-item" @click="answer(1)">排放源名称</el-button>
      <el-button :size="'mini'" class="ask-btn-item" @click="answer(2)">排放设施</el-button>
      <el-button :size="'mini'" class="ask-btn-item" @click="answer(3)">GHG分类</el-button>
      <el-button :size="'mini'" class="ask-btn-item" @click="answer(4)">GHG类别</el-button>
      <el-button :size="'mini'" class="ask-btn-item" @click="answer(5)">ISO分类</el-button>
      <el-button :size="'mini'" class="ask-btn-item" @click="answer(6)">ISO类别</el-button>
      <el-button :size="'mini'" class="ask-btn-item" @click="answer(7)">排放数据单位</el-button>
      <el-button :size="'mini'" class="ask-btn-item" @click="answer(8)">活动数据记录方式</el-button>
      <el-button :size="'mini'" class="ask-btn-item" @click="answer(9)">活动数据类别</el-button>
      <el-button :size="'mini'" class="ask-btn-item" @click="answer(10)">活动数据评分</el-button>
      <el-button :size="'mini'" class="ask-btn-item" @click="answer(11)">GWP信息</el-button>
      <el-button :size="'mini'" class="ask-btn-item" @click="answer(12)">单位换算比例</el-button>

    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      interval: null, // 计时器
      timeStep: 100, // 运动时间间隔
      word: "",
      testCount: 0,
      recordContent: [],
      askList: ["排放源名称", "排放设施", "GHG分类", "GHG类别", "ISO分类", "ISO类别", "排放数据单位", "活动数据记录方式", '活动数据类别'],
      // 备选回答答案
      answerList: [
        "排放源是造成温室气体排放的源头，比如柴油燃烧、汽油燃烧、空调制冷剂逸散造成了温室气体的排放，而汽油、柴油、空调制冷剂属于排放源",
        "一般指造成温室气体排放的具体设施，比如移动燃烧源-汽油",
        "包括范围一、范围二、范围三",
        "排放源分类的子类别",
        "包括直接排放和清除、能源间接排放、运输间接排放、外购产品或服务间接排放、供应链下游排放、其他间接排放；选择GHG分类后会自动显示ISO分类",
        "和GHG 排放源子类别一一对应",
        "排放源的单位，比如：电力对应的单位是Kwh、Mwh，柴油对应的单位时kg、t等；",
        "一般有入库记录、消耗记录、缴费发票等方式，如有别的方式也可上线",
        "支持选择三种方式-自动连续测量、连续测量、自行推估等",
        "不同的活动数据类别对应不同的评分，数据测量方式越精准，得分越高。自动连续测量对应6分，数据质量最高；连续测量对应3分，数据质量中等；自行推估对应1分，数据质量较低。",
        "一单位排放源含有的温室气体因子数值，比如：1L汽油在燃烧过程中会排放三种温室气体，转化为CO2e为0.5 kg",
        "当排放源的单位和因子的单位不一致时，可以填写相应的换算系数。比如：排放源重量和体积的转化，需乘以排放源的密度。1kg 92汽油=0.725L 92汽油"
      ]
    }
  },
  methods: {
    answer(num) {
      this.addUserWord(this.askList[num - 1])
      this.dealWord(this.answerList[num])
    },
    chatTime() {
      return ''
    },
    load() {
    },
    // 添加用户输入到聊天框中
    addUserWord(word) {
      this.recordContent.push({
        mineMsg: true,
        headUrl: require("@/assets/yong.png"),
        nickName: "用户",
        contactText: word
      })


    },
    // 逐个输出文字内容到聊天框中
    dealWord(word) {
      var _this = this
      var newWordIndex = 0;
      _this.recordContent.push({
        mineMsg: false,
        headUrl: require("@/assets/kefu.png"),
        nickName: "智能表单助手",
        contactText: ""
      })
      _this.recordContent[_this.recordContent.length - 1].contactText = word
      // this.interval = setInterval(function(){

      //   if(newWordIndex > word.length){
      //     clearInterval(_this.interval)
      //   }
      //   _this.recordContent[_this.recordContent.length - 1].contactText += word.charAt(newWordIndex)
      //   newWordIndex += 1
      // }, _this.timeStep)
    }
  },
  mounted() {
    // this.dealWord(this.answerList[0])
  },
  beforeDestroy() {
    clearInterval(this.interval)
  },
}
</script>

<style lang="scss">
.ask-btn {
  position: absolute;
  bottom: 50px;
  margin-top: 20px;
}

.ask-btn-item {
  margin: 5px;
}

.my-input {
  position: absolute;
  left: 10%;
  bottom: 200px;
  width: 300px;
}

.chat-content {
  width: 100%;
  padding: 20px;

  .word {
    display: flex;
    margin-bottom: 20px;
    max-width: 600px;

    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .info {
      margin-left: 10px;

      .time {
        font-size: 12px;
        color: #000;
        margin: 0;
        height: 20px;
        line-height: 20px;
        margin-top: -5px;
      }

      .info-content {
        padding: 10px;
        font-size: 14px;
        background: #94dba0;
        position: relative;
        margin-top: 8px;
      }

      //小三角形
      .info-content::before {
        position: absolute;
        left: -8px;
        top: 8px;
        content: '';
        border-right: 10px solid #94dba0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
      }
    }
  }

  .word-my {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;

    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .info {
      width: 90%;
      margin-left: 10px;
      text-align: right;

      .time {
        font-size: 12px;
        color: rgba(51, 51, 51, 0.8);
        margin: 0;
        height: 20px;
        line-height: 20px;
        margin-top: -5px;
        margin-right: 10px;
      }

      .info-content {
        max-width: 70%;
        padding: 10px;
        font-size: 14px;
        float: right;
        margin-right: 10px;
        position: relative;
        margin-top: 8px;
        background: #A3C3F6;
        text-align: left;
      }

      //小三角形
      .info-content::after {
        position: absolute;
        right: -8px;
        top: 8px;
        content: '';
        border-left: 10px solid #A3C3F6;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
      }
    }
  }
}
</style>
